<script>
import {system} from "@/util/config";

export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      uploadUrl: system.apiUrl + '/common/uploadFile',
      showUrl: system.apiUrl,
      token: sessionStorage.getItem("token"),
      fileList: [],
    }
  },
  props:{
    model:Array
  },
  mounted() {

  },
  methods: {
    handleRemove(file) {
      let url = file.response.data.url;
      debugger
      let index = this.model.findIndex(x=>{
        return x === url
      })
      this.model.splice(index, 1)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    uploadSucc(res, file) {
      debugger
      this.model.push(res.data.url)
    }
  }
}
</script>

<template>
  <div>
    <el-upload :action="uploadUrl" :on-success="uploadSucc" :on-remove="handleRemove" :headers="{'X-Access-Token':token}" list-type="picture-card" :auto-upload="true" >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
        <span class="el-upload-list__item-actions">
          <span v-if="!disabled" class="el-upload-list__item-delete"  @click="handleRemove(file)" >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
